<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" isELIgnored="false"%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>
<base href="<%=basePath%>">
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>常德快贷平台</title>
	<link rel="stylesheet" href="css/bootstrap.min.css" />
	<link rel="stylesheet" href="css/style1.css" />
	<link rel="stylesheet" href="css/kkpager_blue1.css" />
	<link rel="stylesheet" href="css/jjalert.css" />
	<script src="js/jquery.min.js"></script>
	<script src="js/bootstrap.min.js"></script>
	<script src="js/schedule.js" ></script>
	<script src="js/main1.js" ></script>
	<script src="js/jjalert.js" ></script>
	<style>
	.public_container .leftbar_container a.active:nth-child(3) {
	  background: url(images/my_left_bar_icon_3_new_blue.png) no-repeat 10px center;
	}
	.public_container .leftbar_container a:nth-child(3) {
	  background: url(images/my_left_bar_icon_3_new.png) no-repeat 10px center;
	}
	.public_container .leftbar_container a:nth-child(3):hover {
	  color: #0048b3;
	  font-size: 14px;
	  background: url(images/my_left_bar_icon_3_new_blue.png) no-repeat 10px center;
	  border-left: 4px solid #0048b3;
	}
	.mycheckbox i{
		display: inline-block;
		vertical-align: middle;
		width: 15px;
		height: 15px;
		border: 1px solid #ccc;
		z-index: 5;
		cursor:pointer;
		border-radius: 4px;
		margin-right: 3px;
	}
	.mycheckbox i.checked{
		background:#0048b3 url(images/mycheckbox.png) no-repeat center center;
	}
	.public_container .right_main_container .customer_add_container .checkbox_container{
		padding:15px 150px;
	}
	.public_container .right_main_container .customer_add_container .checkbox_container>.checkbox_row>.checkbox_row{
		margin-top:7px;	
	}
	.public_container .right_main_container .customer_add_container .checkbox_container>.checkbox_row{
		margin-bottom:25px;
	}
</style>

</head>
<body>
	<div class="public_container">
		
		<div class="nav_container">
			<a href="javascript:void(0)" id="xitongguanli">
				<div class="circle"></div>
				<span>系统管理</span>				
			</a> 
		<%-- <%@ include file="pageHeader2" %> --%>
		</div>
		<div class="main_container">
			<div class="leftbar_container">
				<a href="role/account_manage">账号管理</a>
				<a href="role/account_add">添加账号</a>
				<a class="active" href="role/account_rolemanage">角色管理</a>
				<a href="role/my_account" class="my_account">我的账户</a>
				<a  href="role/account_userAction" class="userAction">用户行为</a>
			</div>
			<div class="right_main_container">
				<div class="customer_add_container">
					<h4>角色管理</h4>
					<div class="customer_add_content">
					<button onclick="addRole()">添加角色</button>
						<table class="table table-bordered">
							<thead>
								<tr>
									<th>序号</th>
									<th>角色名称</th>
									<th>创建时间</th>
									<th>描述</th>
									<th>操作</th>
								</tr>
							</thead>
							<tbody id="ActionShowTable">
							</tbody>
						</table>
					</div>
				</div>
			</div>
			<iframe id="myFrame" hidden name="myFrame" scrolling="yes" frameborder="0" class="right_main_container" style="width:30%;flex:1 1 0%"></iframe>	 
		</div>	
	</div>
	<!-- 模态框（Modal） -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
					&times;
				</button>
				<h4 class="modal-title" id="myModalLabel">
					添加角色
				</h4>
			</div>
			<div class="modal-body">
				<form role="form">
							<div class="input_row form-group">
								<label>角色名</label>
								<input type="text" id="role_name" name="role_name" class="form-control" />
								<label class="wrong_alert"></label>
							</div>
							<div class="input_row form-group">
								<label>角色描述</label>
								<textarea id="role_detail" name="role_detail" rows="" cols="" class="form-control" ></textarea>
							</div>
							<div class="input_row form-group">
								<a href="javascript:;"  class="btn btn-default btn_submit" >提交</a>
							</div>
						</form>
			</div>
		</div><!-- /.modal-content -->
	</div><!-- /.modal -->
	<script>
	$(function(){
		getRoles();
	});
function getRoles(){
	$.ajax({
		url : "<%=request.getContextPath()%>"
		+ '/role/getRoles',
		type : "get",
		contentType : "application/json",
		dataType : "json",
		async : false,
		success : function(data) {
			$("#ActionShowTable").html("");
			data.forEach(function (i,index){
				$("#ActionShowTable").append("<tr><td>"+(index+1)+"</td><td>"+i.role_NAME+"</td><td>"+i.createtime+"</td><td>"+i.role_DETAIL+
						"</td><td><a class='authority_btn' href='javascript:void(0);' roleid="+i.role_ID+" rolename="+i.role_NAME+">权限设置</a></td></tr>")
			
			})
			$(".authority_btn").click(function(){				
				var role_id = $(this).attr("roleid");  //获取当前role_id
				var role_name=$(this).attr("rolename");
				var path="<%=request.getContextPath()%>";
				var herf= path+"/role/showRoleMenu?role_id="+role_id+"&role_name="+role_name;
				$("#myFrame").attr("src",herf);
				$("#myFrame").show();
			});
		},
		error : function(data){
			
		}});
}
function addRole(){
	$('#myModal').modal('show');
}
$(".btn_submit").click(function(){
	var data = {
			'role_name': $("#role_name").val(),
			'role_detail':$("#role_detail").val(),
			'fresh':Math.random()
	};
	var path="<%=request.getContextPath()%>";
	 $.ajax({
			url : "<%=request.getContextPath()%>"
			+ '/role/addRole?fresh='+Math.random(),
			data : data,
			type : "get",
			contentType : "application/x-www-form-urlencoded;charset=UTF-8",
			dataType : "json",
			async : false,
			success : function(data) {
				$('#myModal').modal('hide');
				getRoles();
			}
			});
})
</script>
</body>
</html>